<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新东方导航</title>
    <style>
        body {
            font-size: 14px;
            color: gray;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid lightgray;
            background-color: rgb(238, 238, 238);
            border-bottom: 1px dashed gray;
        }

        ul li {
            float: left;
            padding: 0 10px;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: gray;
        }

        .list_box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 240px;
            border: 1px solid gray;
            position: absolute;
            top: 20px;
            right:  15px;
            background-color: white;
            display: none;
        }

        .list_box div>span {
            padding: 5px;
            display: inline-block;
        }

        .list_box div{
            padding: 5px;
            margin: 5px;
        }

        .list_last{
            position: relative;
        }

        .list_last:hover .list_box{
            display: block;
        }
    </style>
</head>

<body>
    <nav>
        <div style="margin-left: 50px;"><img src="img/logo.gif" alt=""></div>
        <ul style="margin-right: 50px;">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="list_last"><a href="#">Contact</a> <img src="img/open_icon.gif" alt="">
                <div class="list_box">
                    <div>
                        <span>托福</span>
                        <span>雅思</span>
                        <span>考研</span>
                        <span>职称英语</span>
                        <span>初中</span>
                        <span>日语</span>
                    </div>
                    <div style="border-top: 1px solid grey; border-bottom: 1px solid grey;">
                        <span>网络课堂</span>
                        <span>资讯中心</span>
                        <span>知识堂</span>
                        <span>资讯中心</span>
                        <span>大师讲坛</span>
                        <span>学习论坛</span>
                        <span>学词</span>
                        <span>考研搜校</span>
                    </div>
                    <div>
                        <span>M-Zone</span>
                        <span>手机报</span>
                        <span>时时英语</span>
                    </div>
            </div>
            </li>
        </ul>
    </nav>

    

</body>

</html>